<template>
    <div class="classArticleDetail">
        <el-button type="text" style="float:left" @click="back()">返回</el-button>
        <h1>{{album.photoname || '图片详情'}}</h1>
        <div class="releaseTime">
            <label>创建时间：{{album.creationtime}}</label>
            <label v-if="album.username || album.userid">作者：{{album.username || album.userid}}</label>
            <label>浏览量：{{album.viewnum}}</label>
            <label v-if="album.jurisdictionname">【{{album.jurisdictionname}}】</label>
        </div>

        <div class="detailContent">
            <div class="article" v-if="activeIndex == 1">
                今天是10月1日，是中国70华诞盛典。将在北京天安门广场举行盛大的阅兵式。为什么要阅兵呢?因为阅兵是为了显示一个国家的强大。
                检阅开始了，习近平主席9：58分登上天安门城楼。当宣布阅兵开始时，习近平主席走下城楼，站在检阅小车上从东长安街向西行驶着，一边向受阅的解放军战士说着：“同志们好!同志们辛苦了!”威武的解放军回答：“主席好!
                当习近平主席回到天安门城楼，阅兵开始了，首先是陆。海。空三军仪仗队，他们步伐整齐，精神抖擞地经过天安门广场
                接受全国人民的检阅。接着是陆军的步兵。炮兵也走过来了，海军穿着雪白的军装，整齐划一，向我们走了，就像一层层海浪涌过来。接着走过来的是空军方队，他们头戴白色头盔，身穿蓝色军装，雄赳赳，气昂昂的。女民兵方队特别引人注目。坦克方队轰鸣着向天安门城楼驶过，它们就像铜墙铁壁的流动堡垒。我想：中国的科技真发达啊!接下来驶向天安门城楼的是装甲车方队，它们装备齐全，有**炮。火箭炮—-。接着是飞机方队，先飞出的是五架三角形造型的飞机，飞机的尾翼喷出五种不同颜色的烟雾，在蓝天白云的映衬下像一道雨后的彩虹。
                接着就是群众游行了，第一个方队围着毛主席的巨大照片，当主席的说话声从录音机里传来时全场一片欢呼。最后还有各省市的花车游行。
                今天的国庆大阅兵太壮观了。
            </div>
            <div class="photoAlbum" v-else-if="activeIndex == 3">
                <img :src="album.pictureurl | pictureUrl" :title="album.picturename" style="width:100%;height:300px" />
            </div>
            <div class="photoAlbum" v-else>
                <el-carousel :interval="4000" height="500px" :autoplay='false' arrow="always" @change='changPhoto'
                    trigger="click" :loop='false'>
                    <el-carousel-item v-for="(item) in albumPhotolist.list" :key="item.id" :name='item.id'
                        @click="changeItem(item)">
                        <img :src="item.pictureurl | pictureUrl" :title="item.picturename"
                            style="width:95%; height:98%" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <div class="comments">
            <el-button @click="pictureGive(1)" v-if="giveActive == 1" class="pictureGive"
            :disabled="isDisableGive">点赞
                <span>({{giveTotal}})</span></el-button>
            <el-button v-if="giveActive == 0" @click="pictureGive(0)"  class="pictureGive" style="color: blue"
            :disabled="isDisableGive">
                <span type="text">点赞</span>
                ({{giveTotal}})</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <label>评论({{commentTotal}})
            </label>
            <div class="textBox">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" maxlength="200" :show-word-limit="true"
                    v-model="textarea">
                </el-input>
                <el-button type="primary" class="btn" size="small" @click="addComment">评论</el-button>
            </div>
        </div>

        <div class="userComment">
            <label>用户评论</label>
        </div>
        <div class="listWarp">
            <!--评论内容-->
            <Commentlist ref="commentlist" :data='activeIndex ==2 ? pictureCache:album' @setComment='setComment'></Commentlist>
        </div>
    </div>
</template>

<script>
    import Commentlist from '@/components/comment/commentListDynamic'
    import Comment from '@c/comment/CommentDynamic';
    import {
        mapState
    } from 'vuex'
    import {
        setCookie,
        removeCookie,
        getCookie
    } from "@/utils/auth";
    export default {
        computed: {
            ...mapState({
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                group: state =>state.researchModule.group
            })
        },
        props: ['activeIndex', 'album', 'picture'],
        components: {
            Comment,
            Commentlist
        },
        //创建前设置
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'overflow: scroll;')
        },
        //销毁前清除
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },
        created() {
        },
        beforeMount() {
            // this.pictrureCGF()
            this.pagePictureslist()
        },
        data() {
            return {
                isDisableGive:false,
                giveTotal: 0,
                commentTotal:0,
                giveActive: 1,
                albumPhotolist: {},
                textarea: "",
                pictureCache: {},
            };
        },
        methods: {
            // 点赞，评论，转发
            pictrureCGF(params) {
                let url = 'photoalbumModule/pictrureGive'
                this.$store.dispatch(url,{
                    id: this.pictureCache?this.pictureCache.id:this.album.id,
                    limit: 1,
                    page: 1,
                    userId: this.userInfo.id,
                    }).then(res =>{
                        res.list.map(item =>{
                            if(item.username == this.userInfo.name){
                                this.giveActive = 0
                            }
                        })
                        this.giveTotal = res.total
                })
            },
            setComment(params){
                this.commentTotal = params
            },
            changeItem(params) {
                this.pictrureCGF()
            },
            // 照片详细切换图片
            changPhoto(params) {
                this.pictureCache = this.albumPhotolist.list[params]
                this.pictrureCGF()
            },
            photoChange(params) {
                this.pictureCache = params
            },
            pictureGive(params) {
                this.isDisableGive = true
                if (params == 1) {
                    this.giveActive = 0
                } else {
                    this.giveActive = 1
                }
                // console.log(params,this.pictureCache,this.album)
                this.$store.dispatch('photoalbumModule/photoGive1', {
                    albumUserId: this.album.userid || JSON.parse(getCookie('otherUserInfo')).userid || JSON.parse(getCookie('otherUserInfo')).id,
                    currentUserId: JSON.parse(getCookie('otherUserInfo')).userid || JSON.parse(getCookie('otherUserInfo')).id,
                    photoid: this.pictureCache?this.pictureCache.photoid : this.album.photoid,
                    pictureid: this.pictureCache?this.pictureCache.id : this.album.id,
                    type: params,
                }).then(res => {
                    if (params == 1) {
                        this.giveActive = 0
                    } else {
                        this.giveActive = 1
                    }
                    this.pictrureCGF()
                    this.isDisableGive = false
                }).catch(res => {
                    this.giveActive = params
                })
            },
            back() {
                this.$emit('closeDetails')
            },
            addComment() {
                if (this.textarea != '') {
                    this.$store.dispatch("commentModule/addGive", {
                            commentid: this.activeIndex == 2 ? this.pictureCache.id : this.album.id,
                            content: this.textarea,
                            type: 1,
                            userid: this.userInfo.id
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success('评论成功')
                                this.textarea = ''
                                this.$refs.commentlist.pageCommentlist()
                            }
                        })
                } else {
                    this.$message.warning('请输入评论内容!')
                }
            },
            // 我的相片列表
            pagePictureslist() {
                let loading = this.$loading({
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                this.$store.dispatch('photoalbumModule/pagePictureslist', {
                    userid: this.album.userid,
                    sort: this.photoSort,
                    id: this.album.id
                }).then(res => {
                    if (res.data.code === 200) {
                        this.albumPhotolist = res.data.result
                        if (this.albumPhotolist) {
                            this.pictureCache = this.albumPhotolist.list[0]
                            this.pictrureCGF()
                        }
                        loading.close()
                    }
                }).catch(err => {
                    loading.close()
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .classArticleDetail {
        width: 100%;
        height: 100%;

        .releaseTime {
            box-sizing: border-box;
            padding: 10px 15px;
            background-color: #f2f6fc;
            font-size: 14px;
            color: #606266;

            label {
                margin-right: 50px;
            }
        }

        .detailContent {
            padding: 15px 0;
            border-bottom: 1px solid #ccc;

            .article {
                text-align: justify;
                text-indent: 26px;
                font-size: 14px;
                color: #303133;
                line-height: 26px;
            }
        }

        .photoAlbum {
            width: 85%;
            margin: 0 auto;
        }

        .upDown {
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: right;
            font-size: 14px;
            color: #303133;
        }

        .comments {
            text-align: left;
            font-size: 16px;
            color: #303133;

            .textBox {
                text-align: right;

                .btn {
                    margin-top: 10px;
                }
            }
        }

        .userComment {
            font-size: 14px;
            color: #303133;
            padding: 10px 0;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }

        .listWarp {
            .list {
                text-align: left;
                font-size: 14px;

                .commentRen {
                    float: left;
                    color: #606266;
                    width: 680px;

                    label {
                        margin: 0px 4px;
                        color: #303133;
                    }
                }

                .commentTime {
                    float: right;
                    margin-top: 12px;
                    color: #909399;
                }
            }
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
    .pictureGive {
        cursor: pointer;
    }
</style>